<script setup>
import { ref, toRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Type from '@components/search/type'
import Search from '@components/search/index'
import PageWrapper from '@components/PageWrapper.vue'
import { common, service } from '@utils'
import {  More } from '@element-plus/icons-vue'
import { usePremission } from '@hooks'

const premission = usePremission({
    More: 'sys:config:del'
})

const searchs = ref([
    {
        type: Type.INPUT,
        key: 'name',
        likes:true,
        width: 6,
        placeholder: '用户名称'
    },
    {
        type: Type.SELECT,
        key: 'type',
        placeholder: '类型',
        valueKey: 'val',
        data: [{
            val:1,
            label:'登录'
        },{
            val:0,
            label:'登出'
        }]
    },
    {
        width: 6,
        type: Type.SEARCH_BUTTON
    }
])

const pageRef = ref()
const tableRef = ref()
let queryForm = {}

const onSearch = (param) => {
    queryForm = param
    pageRef.value.refresh()
}

const getData = async ({ pageNum, pageSize }, cb) => {
    const res = await service.sys.loginLog(pageNum, pageSize, queryForm)
    cb(res)
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0)
    }, 0)
}

// const getTypes = async () => {
//     const res = await service.sys.dictionaryAll('sysConfig')
//     searchs.value[1].data = res
// }

// getTypes()

const width = (function (premission) {
    let width = 24
    premission.edit && (width += 33)
    premission.More && (width += 33)
    return Math.max(width, 60)
})(premission)
</script>
    <template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table class="mytable-scrollbar" ref="tableRef" :loading="props.loading" :data="props.tableData.records" 
                    :max-height="common.tableHeight(true, premission.add ? 2 : 1)" highlight-hover-row round stripe border>
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="id" title="访问编号" />
                    <vxe-column field="name" title="用户名称" />
                    <vxe-column field="ip" title="登录地址" />
                    <vxe-column field="browser" title="浏览器" />
                    <vxe-column field="os" title="操作系统" />
                    <vxe-column title="登录状态">
                        <template #default="{ row }">
                            {{common.getValueByKey('val', row.status, [{label:'失败',val:0},{label:'成功',val:1}], 'label')}}
                        </template>
                    </vxe-column>
                    <vxe-column field="msg" title="操作信息" />
                    <vxe-column field="createTime" title="登录日期" />
                    <!-- <vxe-column title="操作类型">
                        <template #default="{ row }">
                            {{common.getValueByKey('val', row.type, searchs[1].data, 'label')}}
                        </template>
                    </vxe-column> -->
                    <!-- <vxe-column field="createBy" title="操作人员" /> -->
                    <!-- <vxe-column field="remark" title="操作地点" /> -->

                    <!-- <vxe-column title="消耗时间" >
                        <template #default="{ row }">
                            {{row.costTime}}毫秒
                        </template>
                    </vxe-column> -->
                </vxe-table>
            </template>
        </page-wrapper>
    </section>
</template>